<template>
  <basic :field="field">
    <template slot="fieldProps">
      <FormItem label="上传地址" name="action">
        <Input v-model="fieldProps.action" @on-change="handleChange('action')"/>
      </FormItem>
      <FormItem label="是否支持多选" name="multiple">
        <i-switch v-model="fieldProps.multiple" @on-change="handleChange('multiple')"/>
      </FormItem>
      <FormItem label="接受上传的文件类型" name="accept">
        <Input v-model="fieldProps.accept" @on-change="handleChange('accept')"/>
      </FormItem>
    </template>
  </basic>
</template>

<script>
import basic from './basic.vue'

export default {
  name: 'fieldUpload',
  components: {
    basic
  },
  props: {
    field: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      fieldProps: {
        action: '',
        multiple: 0,
        accept: ''
      }
    }
  },
  methods: {
    handleChange(name) {
      let field = {}
      switch (name) {
        case 'action':
          field = {
            props: { action: this.fieldProps.action }
          }
          break
        case 'multiple':
          field = { props: { multiple: this.fieldProps.multiple ? 1 : 0 } }
          break
        case 'accept':
          field = { props: { accept: this.fieldProps.accept } }
          break
      }
      this.$parent.$parent.$emit('on-change-field', field)
    },
    init() {
      const { action, multiple, accept } = this.field.props
      this.fieldProps.action = {
        action: action || '',
        multiple: multiple == 1,
        accept: accept || ''
      }
    }
  },
  created() {
    this.init()
  },
  watch: {
    field: {
      handler() {
        this.init()
      },
      deep: true
    }
  }
}
</script>
